<template>
  <div class="periodic_report_wrapper">
    <div class="main_part">
      <div class="header_text">
        <i class="el-icon-data-line"></i>
        <span>定时报告</span>
      </div>
      <div class="header_search_part">
        <el-form :model="formData" label-width="100px" style="flex: 90">
          <el-row type="flex" align="middle">
            <!-- <el-col :span="6">
              <el-form-item label="报告类型：">
                <el-select v-model="formData.reportType" size="mini" style="width: 90%"></el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="报告名称：">
                <el-select v-model="formData.reportName" size="mini" style="width: 90%"></el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button icon="el-icon-search" size="mini" @click="handleSearch"></el-button>
              <el-button size="mini" type="primary" @click="handleDelete">删除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table_part">
        <el-table :data="tableData" stripe :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }">
          <el-table-column label="#" type="index" width="50" align="center"> </el-table-column>
          <el-table-column label="名称" align="center" prop="">
            <template slot="header" slot-scope="scope">
              <el-checkbox></el-checkbox>
              <span style="margin-left: 4px">名称</span>
            </template>
          </el-table-column>
          <el-table-column label="报告类型" align="center" prop=""></el-table-column>
          <el-table-column label="导出频率" align="center" prop=""></el-table-column>
          <el-table-column label="导出时间" align="center" prop=""></el-table-column>
          <el-table-column label="是否远程访问" align="center" prop=""></el-table-column>
          <el-table-column label="远程访问地址" align="center" prop=""></el-table-column>
          <el-table-column label="访问角色" align="center" prop=""></el-table-column>
          <el-table-column label="创建时间" align="center" prop=""></el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 12px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.pageNo"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pageParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageParams.total"
          ></el-pagination>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      formData: {
        reportType: '',
        reportName: '',
      },
      tableData: [],
      pageParams: {
        pageNo: 1,
        pageSize: 10,
        total: null,
      },
    }
  },
  methods: {
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
    handleSearch() {
      this.$message.warning('功能开发中~')
    },
    handleDelete() {
      this.$message.warning('功能开发中~')
    },
  },
}
</script>

<style lang="scss" scoped>
.periodic_report_wrapper {
  height: 100%;
  background-color: $white;
  .main_part {
    padding: 12px;
    background-color: $white;
    .header_text {
      .el-icon-data-line {
        margin-left: 12px;
        margin-right: 12px;
      }
      font-weight: bold;
      font-size: 20px;
    }
    .header_search_part {
      margin-top: 12px;
      display: flex;
      ::v-deep .el-form-item {
        margin: 0;
      }
    }
    .table_part {
      margin-top: 12px;
      background-color: $white;
    }
  }
}
</style>
